<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 二维码首页设置 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>轮播图设置</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="8" v-for="item in bannerList" :key="item.bId">
            <el-image style="width: 100%;" :src="item.url" fit="fill" :preview-src-list="bannerimgList"></el-image>
            <div style="text-align: center;">
              <el-upload class="upload-demo" action="" :before-upload="(file)=>{editBanner(file,item.bId)}" accept=".png,.jpg"
                         :show-file-list="false">
                <el-button size="small" type="text" icon="el-icon-edit">重新上传</el-button>
              </el-upload>
              <el-button type="text" icon="el-icon-delete" style="margin-right:10px;" @click="delBanner(item.bId)">删除</el-button>
              <el-popover placement="bottom" width="300" trigger="click" v-model="item.flg">
                <el-input type="textarea" autosize v-model="item.link" placeholder="请输入自定义链接"></el-input>
                <el-col style="text-align:right;margin:10px 0 0;">
                  <el-button type="primary" @click="linkClick(item)">确定</el-button>
                </el-col>
                <el-button slot="reference" type="text" icon="el-icon-link">自定义链接</el-button>
              </el-popover>
            </div>
          </el-col>
          <el-col :span="8">
            <el-upload class="upload-dome" drag action="" :before-upload="addBanner" accept=".png,.jpg" :show-file-list="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb，推荐上传 375*200</div>
            </el-upload>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>标题设置</span>
        </div>
        <el-form ref="form" :model="titleIndex" label-width="110px">
          <el-form-item label="首页标题设置">
            <el-input v-model="titleIndex.value"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="titleEditSub(titleIndex)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>银行LOGO</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-upload class="uploadLogo" drag action="" multiple :limit="10" :before-upload="addBankLogo" :on-exceed="addBankLogoMaxNum"
                       accept=".png,.jpg" :show-file-list="false" style="width:100%;">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，最多一次上传10个</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:15px;">
          <el-col :span="3" v-for="item in bank.banklist" style="position:relative;">
            <el-image style="width:100%;" :src="item.bLogo" :preview-src-list="[item.bLogo]">
            </el-image>
            <el-input style="margin:8px 0 15px;" v-model="item.bName" placeholder="请输入银行名称" @change="editBanklogo(item)"></el-input>
            <i class="el-icon-close bankimgDel" @click="bankLogoDel(item.id)"></i>
          </el-col>
          <el-col :span="3">
            <span class="more" @click="getbankList">查看更多<i class="el-icon-arrow-right"></i></span>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 银行LOGO -->
    <el-dialog title="银行LOGO列表" :visible.sync="bank.flg" width="60%">
      <div class="handle-box">
        <el-input v-model="bank.souVal" placeholder="请输入银行名称查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="banksou">搜索</el-button>
      </div>
      <el-row :gutter="20" style="margin-top:15px;">
        <el-col :span="4" v-for="item in bank.bankTable" style="position: relative;">
          <el-image style="width:100%;" :src="item.bLogo" :preview-src-list="[item.bLogo]">
          </el-image>
          <el-input style="margin:8px 0 15px;" v-model="item.bName" placeholder="请输入银行名称" @change="editBanklogo(item)"></el-input>
          <i class="el-icon-close bankimgDel" @click="bankLogoDel(item.id)"></i>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="bank.page" :page-size="bank.limit" :total="bank.totalCount"
                       :pager-count="5" @current-change="bankPageChange" @prev-click="bankPageChange" @next-click="bankPageChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  CustomerHomeGetBannerList,
  CustomerHomeGetBannerAddEdit,
  CustomerHomeGetBannerDel,
  CustomerHomeGetTitle,
  CustomerHomeSubTitle,
  CustomerHomeBankUplogo,
  CustomerHomeEditBanklogo,
  CustomerHomeGetBanklogo,
  CustomerHomeDelBanklogo
} from '../../../api/index';
import Storage from '../../../utils/localStorage';
import cosUpFile from '../../../utils/cos';
export default {
  data() {
    return {
      uploadHeader: { Authorization: Storage.getItem('token') ? Storage.getItem('token') : '1' },
      bannerimgList: [],
      bannerList: [],

      //首页标题
      titleIndex: {},

      //bank
      bank: {
        banklist: [],
        bankAjax: [],
        bankAjaxSettime: '',
        bankTable: [],
        flg: false,
        page: 1,
        limit: 10,
        souVal: '',
        totalCount: 0
      }
    };
  },
  created() {
    this.getBanner();
    this.getTitle();
    this.getBanklogoList();
  },
  methods: {
    //获取轮播图
    getBanner() {
      CustomerHomeGetBannerList().then((res) => {
        if (res.code == 0) {
          res.list.map((item, i) => {
            item.flg = false;
          })
          this.bannerList = res.list;
          this.bannerimgList = [];
          res.list.forEach((item, i) => {
            this.bannerimgList.push(item.url);
          })
        } else {
          this.$message(res.msg);
        }
      })
    },
    //上传图片
    addBanner(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          this.bannerAjax({ bId: '', url: 'https://' + data.Location });
        }
      })
    },
    //修改banner
    editBanner(file, id) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          this.bannerAjax({ bId: id, url: 'https://' + data.Location });
        }
      })
      return false;
    },
    //删除banner
    delBanner(id) {
      this.$confirm('确定删除此轮播图吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        CustomerHomeGetBannerDel({ bId: id }).then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getBanner();
          } else {
            this.$message(res.msg);
          }
        })
      })
    },
    //选择连接
    linkClick(item) {
      this.bannerAjax({ bId: item.bId, link: item.link, url: item.url });
    },
    //banner新增编辑ajax
    bannerAjax(obj) {
      CustomerHomeGetBannerAddEdit(obj).then(res => {
        if (res.code == 0) {
          if (obj.bId) {
            this.$message.success("编辑成功");
          } else {
            this.$message.success("上传成功");
          }
          this.getBanner();
        } else {
          this.$message(res.msg);
        }
      })
    },

    //获取标题
    getTitle() {
      CustomerHomeGetTitle().then((res) => {
        if (res.code == 0) {
          this.titleIndex = res.constant;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //提交修改标题
    titleEditSub(item) {
      CustomerHomeSubTitle(item).then((res) => {
        if (res.code == 0) {
          this.$message.success('修改成功');
        } else {
          this.$message(res.msg);
        }
      })
    },

    //上传银行logo
    addBankLogo(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          // 'https://' + data.Location
          clearTimeout(this.bank.bankAjaxSettime);
          this.bank.bankAjax.push({ bName: '', bLogo: 'https://' + data.Location });
          this.bank.bankAjaxSettime = setTimeout(() => {
            this.addUpBanklogo(JSON.stringify(this.bank.bankAjax));
            this.bank.bankAjax = [];
          }, 1000);
        }
      })
    },
    //上传banklogo
    addUpBanklogo(obj) {
      CustomerHomeBankUplogo({ bankList: JSON.parse(obj) }).then(res => {
        if (res.code == 0) {
          this.$message.success('上传成功');
          this.getBanklogoList();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //编辑banklogo
    editBanklogo(item) {
      CustomerHomeEditBanklogo(item).then(res => {
        if (res.code == 0) {
          this.$message.success('编辑成功');
        } else {
          this.$message(res.msg);
        }
      })
    },
    //获取银行logo展示
    getBanklogoList() {
      this.getBanklogoListAjax({ page: 1, limit: 10 });
    },
    // 获取银行logo列表 ajax
    getBanklogoListAjax(obj) {
      CustomerHomeGetBanklogo(obj).then(res => {
        if (res.code == 0) {
          if (obj.page == 1) {
            this.bank.banklist = res.recordList;
            this.bank.bankTable = res.recordList;
            this.bank.totalCount = res.totalCount;
          } else {
            this.bank.bankTable = res.recordList;
            this.bank.totalCount = res.totalCount;
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //上传银行logo 超出个数
    addBankLogoMaxNum(file, fileList) {
      this.$message("超出上传个数限制，最多一次只能上传10个");
    },
    //银行列表获取
    getbankList() {
      this.bank.flg = true;
      this.getBanklogoListAjax({ page: this.bank.page, limit: this.bank.limit, name: this.bank.souVal });
    },
    //银行列表翻页
    bankPageChange(page) {
      this.bank.page = page;
      this.getBanklogoListAjax({ page: this.bank.page, limit: this.bank.limit, name: this.bank.souVal });
    },
    //银行列表搜索
    banksou() {
      this.bank.page = 1;
      this.getBanklogoListAjax({ page: this.bank.page, limit: this.bank.limit, name: this.bank.souVal });
    },
    //删除银行logo
    bankLogoDel(id) {
      this.$confirm('确定删除此logo吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        CustomerHomeDelBanklogo({ id: id }).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功');
            this.getBanklogoListAjax({ page: this.bank.page, limit: this.bank.limit, name: this.bank.souVal });
          } else {
            this.$message(res.msg);
          }
        })
      })
    }
  }
};
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}
.uploadLogo {
    width: 100%;
}
.uploadLogo >>> .el-upload {
    width: 100%;
}
.uploadLogo >>> .el-upload-dragger {
    width: 100%;
}
.more {
    height: 9vw;
    display: block;
    line-height: 9vw;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}
.handle-input {
    width: 90%;
    display: inline-block;
}
.bankimgDel {
    position: absolute;
    top: 5px;
    right: 15px;
    color: #333;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
}
</style>
